<!--
    VERY basic dynamic content demo, using JSON for data interchange.
    See the small JavaScript at the end of this page to see how it works.

    As of version 2.1, this is managed by jQuery
-->

<div>
  <h3>AJAX/JSON Demo</h3>
  <div class="listOptions">
    <span>Item lookup: 
      <input type="text" id="itemName" /> &nbsp;
      Qty: <input type="text" id="itemQty" value="1" style="width: 30px" /> 
      <button onclick="getItem()">Go</button>
    </span>
  </div>

  <table id="itemStuff" style="display:none" width="450">
    <tr>
      <td colspan="2" class="sub" id="itemFullName"></td>
    </tr>
    <tr>
      <td colspan="2" id="itemDescription"></td>
    </tr>
    <tr>
      <td align="right"><b>Avg Selling Price:</b></td>
      <td id="itemUnitPrice"></td>
    </tr>
    <tr>
      <td align="right"><b>Total Price:</b></td>
      <td id="itemTotalPrice"></td>
    </tr>
    <tr>
      <td align="right"><b>Total Volume:</b></td>
      <td id="itemTotalVolume"></td>
    </tr>
  </table>

  <div id="itemError" class="sub bad" style="display:none; font-size: 1.3em; width: 500px;">

  </div>

</div>

<script type="text/javascript">
  function getItem() {
    var itemName = $('#itemName').val();
    
    jQuery.getJSON('index.php', { jsonMode: 1, module: 'ajaxtest', item: itemName }, function(item) {
      if (item) {
        if (item.error) {
          // received an error. hide the item info table and show the error
          $('#itemStuff').css('display', 'none');
          $('#itemError').css('display', '');

          $('#itemError').html(item.error);
        } else {
          $('#itemStuff').css('display', '');
          $('#itemError').css('display', 'none');

          // set the name element
          $('#itemFullName').html(item.typename);

          // clear out the existing description content
          $('#itemDescription').html('');

          // set up the item's icon graphic          
          $("<img/>")
          .attr("src", item.icon.icon64)
          .attr('align', 'left')
          .css('margin-left', '10px')
          .appendTo("#itemDescription");
      
          // set up the description
          $("<span/>")
          .html(item.description)
          .appendTo('#itemDescription');

          // add unit selling price
          $('#itemUnitPrice').html(item.pricing.avgSell.numberFormat('0,0.00'));

          // add total selling price
          $('#itemTotalPrice').html((item.pricing.avgSell * $('#itemQty').val()).numberFormat('0,0.00'));

          // add total volume
          $('#itemTotalVolume').html((item.volume * $('#itemQty').val()).numberFormat('0,0.00'));
        }
      };
    });
  }

</script>